<!-- 参照心理测评平台的用户档案，做学生档案 关键：预警等级/情况 -->
<script setup lang="ts">
import {
  filterUser,
  AdminUpdateRank,
  UserSpecificID,
  AdminUpdateActive,
} from "../../../http/api";
import { onMounted, reactive, ref } from "vue";
import pagination from "../../../components/pagination/index.vue";
import { ElMessage } from "element-plus";

onMounted(() => {
  filter(1);
});

const data = reactive({ data: [], total_pages: 0, total_records: 0 }) as any;
//对象变量
interface User {
  id: number | undefined;
  tag: string;
  user_type?: number;
  index: number;
  is_active: boolean;
  sex: string;
  age: number;
  schoool: string;
  grade: string;
  class: string;
  source: string;
  time: string;
}
//数据
const filter = (val: number) => {
  paginationFlag.value = true;
  filterUser(val, 5).then((res: any) => {
    res.data.map((x: any) => {
      if (x.super_admin) x.tag = "特级关注";
      else if (x.high_admin) x.tag = "严重";
      else if (x.mid_admin) x.tag = "较严重";
      else x.tag = "轻微";
      x.active = x.is_active ? "正常" : "异常";
      x.sex = x.sex != null && x.sex == 0 ? "男" : "女"; //0-男 1-女
      x.age = x.age != -1 ? "18" : x.age;
      x.school = x.school == null ? "广州大学附属中学" : x.school;
      x.grade = x.grade == null ? "三年级" : x.grade;
      x.class = x.class == null ? "三班" : x.class;
      x.source = x.source == null ? "自伤行为SHQ" : x.source;
      x.time = x.time == null ? "2023-10-10" : x.time;
    });
    data.data = res.data;
    data.total_pages = res.total_pages;
    data.total_records = res.total_records;
  });
};

const user = reactive<User>({
  id: undefined,
  tag: "",
  index: -1,
  is_active: true,
  sex: "",
  age: -1,
  schoool: "",
  grade: "",
  class: "",
  source: "",
  time: "",
});

const resetUser = () => {
  queryUser.id = undefined;
  queryUser.tag = "";
  queryUser.index = -1;
  queryUser.user_type = undefined;
};

//更改用户权限
const dialogVisible = ref<boolean>(false);
const handleEdit = (index: number, row: any) => {
  user.index = index;
  user.tag = row.tag;
  user.id = row.id;
  dialogVisible.value = true;
};
//渲染预警级别
const type = (tag: string) => {
  switch (tag) {
    case "特级关注":
      return "danger";
    case "严重":
      return "warning";
    case "较严重":
      return "info";
    case "轻微":
      return "success";
  }
};
const filterTag = (value: string, row: any) => {
  return row.tag === value;
};
const confirm = () => {
  if (data.data[user.index].tag === user.tag) return;
  else {
    let rank: string = "";
    switch (user.tag) {
      case "特级关注":
        rank = "super_admin";
        break;
      case "严重":
        rank = "high_admin";
        break;
      case "较严重":
        rank = "mid_admin";
        break;
      case "轻微":
        rank = "";
        break;
    }
    AdminUpdateRank({ id: user.id as number, rank }).then((res: any) => {
      if (res.msg === "user rank updated!") {
        data.data[user.index].tag = user.tag;
        ElMessage.success("修改成功！");
      }
      dialogVisible.value = false;
    });
  }
};

//注销用户
const dialogVisible2 = ref<boolean>(false);

const filterTag2 = (value: string, row: any) => {
  return row.active === value;
};

const handleEdit2 = (index: number, row: any) => {
  user.index = index;
  user.is_active = row.is_active;
  user.id = row.id;
  dialogVisible2.value = true;
};
const UpdateActive = async () => {
  await AdminUpdateActive(
    { id: user.id as number },
    user.is_active ? "0" : "1"
  ).then((res: any) => {
    if (res.code === 600015) {
      ElMessage.success("修改成功！");
      data.data[user.index].is_active = !data.data[user.index].is_active;
      data.data[user.index].active =
        data.data[user.index].active === "正常" ? "异常" : "正常";
    }
  });
  dialogVisible2.value = false;
};

const paginationFlag = ref<boolean>(true);

//根据id查用户
const queryUser = reactive<User>({
  id: undefined,
  tag: "",
  index: -1,
  is_active: true,
  sex: "",
  age: -1,
  schoool: "",
  grade: "",
  class: "",
  source: "",
  time: "",
});
const query = () => {
  if (queryUser.id === undefined) return;
  UserSpecificID({ id: parseInt(queryUser.id as any) }).then((res: any) => {
    if (res.code === 611111) {
      if (res.user_info.super_admin) res.user_info.tag = "特级关注";
      else if (res.user_info.high_admin) res.user_info.tag = "严重";
      else if (res.user_info.mid_admin) res.user_info.tag = "较严重";
      else res.tag = "轻微";

      data.data = [];
      paginationFlag.value = false;
      data.data[0] = res.user_info;
    } else if (res.code === 600003) {
      paginationFlag.value = false;
      data.data = [];
    }
  });
};

const inputNum = (value: any) => {
  if (value == undefined) return;
  if (typeof value === "number") return value;
  return value
    .replace(/[^\d.]/g, "")
    .replace(/\.{2,}/g, ".")
    .replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".")
    .replace(/^\./g, "");
};
</script>

<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="dw-table-form" style="padding-left: 60px">
          <el-form :inline="true" class="dw-form-inline" :model="user">
            <el-row>
              <el-col :span="8">
                <el-form-item label="ID">
                  <el-input
                    placeholder="请输入查询的ID"
                    :oninput="(queryUser.id = inputNum(queryUser.id))"
                    v-model="queryUser.id"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户名">
                  <el-input
                    placeholder="请输入用户名"
                    :oninput="(queryUser.id = inputNum(queryUser.id))"
                    v-model="queryUser.id"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="学校">
                  <el-input
                    placeholder="请输入学校"
                    :oninput="(queryUser.id = inputNum(queryUser.id))"
                    v-model="queryUser.id"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="年级">
                  <el-input
                    placeholder="请输入年级"
                    :oninput="(queryUser.id = inputNum(queryUser.id))"
                    v-model="queryUser.id"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="班级">
                  <el-input
                    placeholder="请输入班级"
                    :oninput="(queryUser.id = inputNum(queryUser.id))"
                    v-model="queryUser.id"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" class="form-btn-group">
                <el-form-item>
                  <el-button @click="resetUser">重置</el-button>
                  <el-button type="primary" @click="query">查询</el-button>
                  <el-button type="primary" @click="filter(1)"
                    >查看所有</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dw-table">
          <div class="dw-table-title">
            <el-row
              :span="24"
              type="flex"
              justify="space-between"
              align="middle"
            >
              <!-- <el-col :span="4">
                <h3>学生档案</h3>
              </el-col> -->
              <el-col :span="20" style="text-align: left">
                <el-button type="primary"> + 新增危机风险评估</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table stripe style="width: 100%" :data="data.data">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="账号" prop="id" />
            <el-table-column label="用户名" prop="username" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="学校" prop="school" />
            <el-table-column label="年级" prop="grade" />
            <el-table-column label="班级" prop="class" />
            <el-table-column label="预警来源" prop="source" />
            <el-table-column label="预警时间" prop="time" />
            <el-table-column
              prop="tag"
              label="级别"
              :filters="[
                { text: '特级', value: '特级' },
                { text: '三级', value: '三级' },
                { text: '一级', value: '一级' },
                { text: '正常', value: '正常' },
              ]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
            >
              <template #default="scope">
                <el-tag :type="type(scope.row.tag)" disable-transitions
                  >{{ scope.row.tag }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  type="danger"
                  @click="handleEdit2(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="dw-pagination">
            <pagination
              :total="data.total_records"
              @current-change="filter"
              v-if="paginationFlag"
              :pageCount="data.total_pages"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog v-model="dialogVisible2" title="删除用户" width="30%">
      <div class="mb-2 flex items-center text-sm">
        是否{{ user.is_active ? "删除" : "恢复" }} id号为 {{ user.id }}的用户
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">否</el-button>
          <el-button type="primary" @click="UpdateActive"> 是 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.dw-table-form {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.dw-table {
  background: white;
  padding: 20px;
}

.dw-table .dw-table-title {
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}

.dw-table .dw-table-title h3 {
  padding: 0px;
  margin: 0px;
}

.el-form-item {
  margin-bottom: 20px;
  margin-right: 20px;
}

.dw-dialog-form-item {
  margin-top: 20px;
}

.dw-pagination {
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
